<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp" %>
<!DOCTYPE>
<html>
<head>
	<title>用户管理</title>
	<%@ include file="/WEB-INF/views/include/head.jsp" %>
</head>
<body>
<%@ include file="/WEB-INF/views/include/loading.jsp" %>
<!-- 数据列表  -->
<div class="easyui-layout" data-options="fit:true,border:false" >
	<div data-options="region:'center'" >
		<table id="Grid" class="easyui-datagrid" ctrlSelect="true" striped="true"
		       rownumbers="true" pagination="true"  toolbar="#Grid_Toolbar"
		       loadMsg="正在加载数据，请稍等..." emptyMsg="没有找到符合条件的数据"
		       data-options="
					url:'${ctx}/user/user/list',
					fit:true,
					fitColumns:true,
					checkOnSelect:true,
					selectOnCheck:true,
					border:false,
					onDblClickRow:onDblClickRow">
			<thead>
			<tr >
				<th width="100" data-options="field:'ck',checkbox:true"></th>
				<th width="100" data-options="field:'id',hidden:true">id</th>
				<th width="100" data-options="field:'username',width:100">用户名</th>
				<th width="100" data-options="field:'realname',width:100">姓名</th>
				<th width="100" data-options="field:'phone',width:100">手机</th>
				<th width="100" data-options="field:'email',hidden:true">邮箱</th>
				<th width="100" data-options="field:'sexDesc',hidden:true">性别</th>
				<th width="100" data-options="field:'birthday',hidden:true">出生日期</th>
				<th width="100" data-options="field:'authPhone',hidden:true">手机号</th>
				<th width="100" data-options="field:'idcard',hidden:true">身份证号</th>
				<th width="100" data-options="field:'carVin',hidden:true">汽车VIN码</th>
				<th width="100" data-options="field:'registerTypeDesc',hidden:true">注册类型</th>
				<th width="100" data-options="field:'experienceNumber',width:100">经验值</th>
				<th width="100" data-options="field:'integralNumber',width:100">积分</th>
				<th width="100" data-options="field:'levelName',width:100">认证等级</th>
				<th width="100" data-options="field:'lockedDesc',width:100">是否锁定</th>
				<th width="100" data-options="field:'locked',hidden:true">是否锁定</th>
				<%--<th data-options="field:'createUserName'">创建人</th>--%>
				<%--<th data-options="field:'createTime'">创建时间</th>--%>
				<%--<th data-options="field:'modifyUserName'">修改人</th>--%>
				<%--<th data-options="field:'modifyTime'">修改时间</th>--%>
				<%--<th data-options="field:'address',hidden:true">家庭住址</th>--%>
				<%--<th data-options="field:'isDeleteName',hidden:true">是否删除</th>--%>
				<%--<th data-options="field:'remarks'">备注</th>--%>
			</tr>
			</thead>
		</table>
		<div id="Grid_Toolbar">
			<form id="searchForm" name="searchForm">
				<shiro:hasPermission name="user:query">
					<%--<input class="easyui-textbox" id="keyword" name="keyword" data-options="prompt:'用户名/姓名/手机号等'" Csize="25">--%>
					<input class="easyui-textbox" id="username" name="username" data-options="prompt:'用户名'" size="20">
					<input class="easyui-textbox" id="realname" name="realname" data-options="prompt:'姓名'" size="20">
					<input class="easyui-textbox" id="phone" name="phone" data-options="prompt:'手机号'" size="20">
					<input class="easyui-combobox" id="locked" name="locked"
					       data-options="
					       url:'${ctx}/enumData/lieBao/userLocked',
					       textField:'label',
					       width:100,
					       panelHeight:'auto',
					       editable:false,
					       prompt:'锁定'">
					<a id="btnSearch" href="javascript:void(0)" class="easyui-linkbutton button-primary"><i class="fa fa-search fa-lg"></i>&nbsp;&nbsp;查询</a>
					<a href="javascript:void(0)" class="easyui-linkbutton reset l-btn l-btn-small" plain="true" onclick="resetForm('searchForm')"><i class="fa fa-repeat fa-lg"></i>&nbsp;&nbsp;重置</a>
				</shiro:hasPermission>

				<div class="pull-right">
					<shiro:hasPermission name="user:create">
						<a id="btnCreate" href="javascript:void(0)" class="easyui-linkbutton button-success">
							<i class="fa fa-plus-circle fa-lg"></i>&nbsp;&nbsp;新增
						</a>
					</shiro:hasPermission>
					<shiro:hasPermission name="user:update">
						<a id="btnUpdate" href="javascript:void(0)" class="easyui-linkbutton button-default">
							<i class="fa fa-pencil fa-lg"></i>&nbsp;&nbsp;修改
						</a>
					</shiro:hasPermission>
					<shiro:hasPermission name="user:delete">
						<a id="btnDelete" href="javascript:void(0)" class="easyui-linkbutton button-danger">
							<i class="fa fa-minus-circle fa-lg"></i>&nbsp;&nbsp;删除
						</a>
					</shiro:hasPermission>
					<shiro:hasPermission name="user:lock">
						<a id="batch_locked_btn" class="easyui-linkbutton button-success">
							<i class="fa fa-check fa-lg"></i> 锁定
						</a>
					</shiro:hasPermission>

					<shiro:hasPermission name="user:unlock">
						<a id="batch_unlock_btn" class="easyui-linkbutton button-danger">
							<i class="fa fa-remove fa-lg"></i> 解锁
						</a>
					</shiro:hasPermission>
					
				</div>
			</form>
		</div>
	</div>
</div>

<!-- js脚本，必须写在body中，tab的url加载模式只会异步加载body中的内容到tab中 -->
<script type="text/javascript">
	require(['jquery', 'common'], function ($) {

		// 锁定
		$('#batch_locked_btn').click(function () {
			checkHandle(1);
		});

		// 解锁
		$('#batch_unlock_btn').click(function () {
			checkHandle(0);
		});

		function checkHandle (locked) {
			var rows = $("#Grid").datagrid('getSelections');
			if(rows==null || rows==''){
				return $.messager.alert('提示', '请选择需要处理的记录', "info");
			}
			var isLocked = rows[0].locked;
			if (rows.length == 0) return $.messager.alert('提示', '请选择需要处理的记录', "info");
			if (isLocked == locked) return $.messager.alert('提示', '请勿重复操作', "info");
			var ids = rows.map(function (row) {
				return row.id;
			}).join();

			if (locked === 0) {
				sendHandle(ids, locked);

			} else {
				sendHandle(ids, locked);
			}
		}

		function sendHandle (ids, locked) {
			$.ajax({
				url: '${ctx}/user/user/handle',
				data: {
					ids: ids,
					locked: locked
				},
				type: 'post',
				dataType: 'json',
				success: function (json) {
					if (json && json.rtnCode == '00000000') {
						$.messager.alert('提示', "操作成功", "success");
						$('#Grid').datagrid('reload');
					} else {
						$.messager.alert('提示', json.rtnMsg, 'error');
					}
				}
			});
		}

		// 给新增按钮添加点击事件
		$("#btnCreate").on('click', function () {
			showDialog('新增用户', '${ctx}/user/user/add', 800, 500, function () {
				$('#Grid').datagrid('reload');
			});
		});

		// 给修改按钮添加点击事件
		$("#btnUpdate").on('click', function () {
			var selected = $("#Grid").datagrid('getSelections');
			if (selected.length == 0) {
				$.messager.alert('提示', '请选择需要修改的记录', "info");
			}
			if (selected.length > 1) {
				$.messager.alert('提示', '只能选择一条需要修改的记录', "info");
			}
			if (selected.length == 1) {
				showDialog('编辑用户', '${ctx}/user/user/edit?id=' + selected[0].id, 800, 500, function () {
					$('#Grid').datagrid('reload');
				});
			}
		});

		// 给删除按钮添加点击事件
		$("#btnDelete").on('click', function () {
			var selected = $("#Grid").datagrid('getSelections');
			if (selected.length == 0) {
				$.messager.alert('提示', '请选择需要删除的记录', "info");
			} else {
				$.messager.confirm('警告', '确认删除本条记录吗?', function (r) {
					if (r) {
						var ids = '';
						for (var i = 0; i < selected.length; i++) {
							ids += selected[i].id + ',';
						}

						$.ajax({
							url: '${ctx}/user/user/delete',
							data: {
								ids: ids
							},
							type: 'post',
							dataType: 'json',
							success: function (json) {
								if (json && json.rtnCode == '00000000') {
									$.messager.alert('提示', "删除成功", "success");
									$('#Grid').datagrid('reload');
								} else {
									$.messager.alert('提示', json.rtnMsg);
								}
							}
						});
					}
				});
			}
		});

		// // 表单提交，获取查询条件重载表格数据
		// $('#searchForm').submit(function () {
		// 	$('#Grid').datagrid('reload', $('#searchForm').serializeObject());
		// 	return false;
		// });
		//
		// // 清空查询表单，重载表格数据
		// $('#reset_btn').click(function () {
		// 	$('#searchForm').form('reset').submit();
		// });
		// 给查询按钮添加点击事件
		$("#btnSearch").on('click', function(){
			if($('#searchForm').form('enableValidation').form('validate')){
				reload();
			}
		});

		// 清空查询表单，重载表格数据
		$('#reset_btn').click(function () {
			$('#searchForm').form('reset').submit();
		});
	});

	function reload(){
		var params = $('#Grid').datagrid('options').queryParams;
		// params.keyword = $('#keyword').val();
		params.username = $('#username').val();
		params.realname = $('#realname').val();
		params.phone = $('#phone').val();
		params.locked = $('#locked').val();
		$('#Grid').datagrid('options').queryParams = params;
		$('#Grid').datagrid('reload');
	}

	<shiro:hasPermission name="user:lock">

	function lockedFormatter (value, row) {
		return '<input id="btn_' + row.id + '" size="5">';
	}

	</shiro:hasPermission>

	function onLoadSuccess (data) {
		<shiro:hasPermission name="user:lock">
		$.makeArray(data.rows).forEach(function (row) {
			$('#btn_' + row.id).switchbutton({
				width: 50,
				onText: '是',
				offText: '否',
				checked: row.locked,
				onChange: function (checked) {
					var $locked_btn = $(this),
						revert = $locked_btn.data('revert');

					$locked_btn.data('revert', false);

					if (!revert) {
						$.messager.confirm('系统提示', '您确定' + (checked ? '锁定' : '解锁') + '该用户吗？', function (r) {
							if (r) {
								$.ajax({
									url: '${ctx}/user/user/lock',
									data: {
										id: row.id,
										locked: checked
									},
									type: 'post',
									dataType: 'json',
									success: function (json) {
										if (json && json.rtnCode == '00000000') {
											$.messager.alert('提示', json.rtnMsg, "success");
											$('#Grid').datagrid('reload');
										} else {
											$.messager.alert('提示', json.rtnMsg);
											$locked_btn.data('revert', true).switchbutton(checked ? 'uncheck' : 'check');
										}
									}
								}).error(function () {
									$locked_btn.data('revert', true).switchbutton(checked ? 'uncheck' : 'check');
								});
							} else {
								$locked_btn.data('revert', true).switchbutton(checked ? 'uncheck' : 'check');
							}
						});
					}

				}
			});
		});
		</shiro:hasPermission>
	}

	/**
	 * Easyui重置表单
	 * @param formId
	 */
	function resetForm(formId){
		$('#searchForm').form('reset');
		reload();
	};

	function onDblClickRow (index, row) {
		showDialog('<i class="fa fa-eye fa-lg"></i>&nbsp;&nbsp;详情页面', '${ctx}/user/user/view?id=' + row.id, 800, 500);
	}
</script>
</body>
</html>